import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import { connect } from 'react-redux'

import {createPersonAction} from '../../redux/actions/person_action'

 class Person extends Component {


  addPerson = () => {
    const  name  = this.nameNode.value
    const  age  = this.ageNode.value
    const personObj = { id: nanoid(), name, age }
    this.props.jiaren(personObj)

    this.nameNode.value = ''
    this.ageNode.value = ''
  }

  render() {
    return (
      <div>
        <h2>Person组件</h2>
        <h2>求和为： {this.props.count}</h2>
        <input ref = {c=>this.nameNode = c} type="text" placeholder = "'请输入名字'"/>
        <input ref={c => this.ageNode = c} type="text" placeholder="'请输入年龄'" />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.person.map((item)=>{
              return <li key = {item.id}>{item.name}-----{item.age}</li>
            })
         }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({ person: state.person, count: state.he }),
  {jiaren: createPersonAction}
)(Person)
